import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { ImagePicker, Toast, WingBlank } from 'antd-mobile';
import style from './mine.module.scss'
import Axios from 'axios';
/*
    1、username
    2、avator_url 头像地址
    3、oauth_token 
*/
class Mine extends Component {
    state = {
        files: [],
        username:'',
        oauth_token:'',
        mobile:''
    }
    componentDidMount(){
        let data = JSON.parse(localStorage.getItem('token'))
        this.setState({
            username:data.name,
            oauth_token:data.token,
            mobile:data.user
        })
    }
    onChange = (files) => {
        console.log(files);
        this.setState({
            files,
        });
    }
    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
            multiple: index === 1,
        });
    }
    // 昵称
    nameChange=(e)=>{
        this.setState({username:e.target.value})
    }
    // 手机号
    mobileChange=(e)=>{
        this.setState({mobile:e.target.value})
    }
    // 保存
    save=()=>{
        if(this.state.files.length !== 0){
            // 告诉后端
            Axios.post('http://s.linweiqin.com/api/s/updateUserInfo',{
                username:this.state.mobile,
                avator_url:this.state.files[0].url,
                oauth_token:this.state.oauth_token
            }).then(res=>{
                console.log(res)
                // 告诉本地存储 localStorage
                let data = JSON.parse(localStorage.getItem('token'))
                data.username = this.state.mobile
                data.name = this.state.username
                data.url = this.state.files[0].url
                localStorage.setItem('token',JSON.stringify(data))
                Toast.info(res.data.msg,2,()=>{
                    this.props.history.push('/my')
                })
            })
        }else{
            // 告诉后端
            Axios.post('http://s.linweiqin.com/api/s/updateUserInfo',{
                username:this.state.mobile,
                oauth_token:this.state.oauth_token
            }).then(res=>{
                console.log(res)
                // 告诉本地存储 localStorage
                let data = JSON.parse(localStorage.getItem('token'))
                data.username = this.state.mobile
                data.name = this.state.username
                localStorage.setItem('token',JSON.stringify(data))
                Toast.info(res.data.msg,2,()=>{
                    this.props.history.push('/user')
                })
            })
        }
        
    }

    render() {
        return (
            <div className={style.wrap}>
                {/* 脑袋 */}
                <div className={style.header}>
                    <b onClick={() => { window.history.go(-1) }}>{'<'}</b>
                    <h2>个人信息</h2>
                    <p>
                        <span className="iconfont icon-fenxiang"></span>
                        <span className='iconfont icon-xiaochengxu-guanbi'></span>
                    </p>
                </div>
                <h2 className={style.title}>
                    <span>头像:</span>
                    <WingBlank>
                        <ImagePicker
                            files={this.state.files}
                            onChange={this.onChange}
                            selectable={this.state.files.length < 2}
                            multiple={false}
                            className={style.files}
                        />
                    </WingBlank>
                </h2>
                <div className={style.name}>
                    <span>昵称：</span>
                    <input type="text" value={this.state.username} onChange={this.nameChange} />
                </div>
                <div className={style.mobile}>
                    <span>手机号：{}</span>
                    <input type="text" value={this.state.mobile} onChange={this.mobileChange}/>
                </div>
                <h6 onClick={this.save}>保存</h6>
            </div>
        )
    }
}
export default withRouter(Mine)
